<template>
  <!-- 社保变动记录 -->
  <div id="socialSecurityChangeReport" class="blackFont">
    <div class="selectSub">
      <SubsidiarySelect @change="handleCompanyChange" />
    </div>
    <div class="pageHead">
      <el-form class="listQueryForm" ref="listQuery" :model="listQuery" inline>
        <el-form-item>
          <MultipleDepartments ref="departmentsSelect" :subId="listQuery.subId" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="listQuery.keyWord" placeholder="人员、工号" />
        </el-form-item>
        <el-form-item label="变动类型：">
          <el-select v-model="listQuery.operateType">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchReportList(true)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <div class="tableContent">
        <el-table :data="reportList" height="calc(100% - 40px)">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="姓名" prop="userName"></el-table-column>
          <el-table-column label="工号" prop="workNumber"></el-table-column>
          <el-table-column label="部门" prop="departmentName"></el-table-column>
          <el-table-column label="岗位" prop="postName"></el-table-column>
          <el-table-column label="变动类型" prop="operationTypeDesc"></el-table-column>
          <el-table-column label="参保方案" prop="ssafName"></el-table-column>
          <el-table-column label="参保城市" prop="ssafCity"></el-table-column>
          <el-table-column label="变动时间" prop="createTime"></el-table-column>
          <el-table-column label="变动原因" prop="operationContent"></el-table-column>
          <el-table-column label="操作人" prop="operationUserName"></el-table-column>
        </el-table>
        <el-pagination :small="true" background @size-change="(value) => handleSearchChange(value, 'pageSize')" @current-change="(value) => handleSearchChange(value, 'pageIndex')" :current-page="listQuery.pageIndex" :page-sizes="[10, 20, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagingChild"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import MultipleDepartments from "@/views/personnelRegulate/rewardManagement/components/MultipleDepartments.vue";
import SubsidiarySelect from "@/views/personnelRegulate/rewardManagement/components/SubsidiarySelect.vue";
export default {
  name: 'socialSecurityChangeReport',
  components: {
    MultipleDepartments,
    SubsidiarySelect
  },
  data() {
    return {
      listQuery: {
        subId: "",
        keyWord: "",
        operateType: 0,
        pageIndex: 1,
        pageSize: 10,
        deptIdList: []
      },
      total: 0,
      reportList: [],
      typeList: [{ label: '全部', value: 0 }]
    }
  },
  methods: {
    handleSearchReportList(isClean = false) {
      if (isClean) {
        this.listQuery.pageIndex = 1;
      }
      this.listQuery.deptIdList = this.$refs.departmentsSelect.getDepartments();
      this.searchReportList()
    },

    /**
     * @description 子公司下拉框值变化,进入页面后，先获取子公司id，在执行查询列表操作
     */
    handleCompanyChange(subId) {
      // console.log('subId修改----执行查询', subId);
      this.listQuery.subId = subId;
      this.handleSearchReportList(true);
    },
    searchReportList() {
      this.$api.socialSecurity
        .getPageList(this.listQuery)
        .then(res => {
          console.log(res.data.data);
          this.reportList = res.data.data.items;
          this.total = res.data.data.totalCount;
        }).catch(err => {
          if(err.data.status == 204) {
            this.reportList = [];
            this.total = 0;
          }
        })
    },
    searchOperationTypeList() {
      this.$api.socialSecurity
        .GetSelectOperationTypeList()
        .then(res => {
          console.log(res.data.data);
          this.typeList = [];
          for (const key in res.data.data) {
            if (Object.hasOwnProperty.call(res.data.data, key)) {
              const element = res.data.data[key];
              this.$set(this.typeList, this.typeList.length, {
                label: element,
                value: key
              });
            }
          }
        })
    },
    handleSearchChange(value, prop) {
      this.listQuery[prop] = value;
      this.handleSearchReportList();
    },
  },
  activated() {

    this.searchOperationTypeList();
    if (this.listQuery.subId?.length) {
      this.handleSearchReportList(true);
    };
  }
}
</script>
<style lang="less" scoped>
#socialSecurityChangeReport {
  width: 100%;
  .selectSub {
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 10px;
    #SubsidiarySelect {
      width: 300px;
      :deep(.el-input) {
        .el-input__inner {
          font-size: 17px;
        }
      }
      // font-size: 17px;
    }
  }
  .pageHead {
    .listQueryForm {
      width: 100%;
      min-width: 825px;
      display: flex;
      align-items: center;
    }
  }
  .pageMain {
    height: calc(100% - 90px) !important;
    .tableContent {
      position: relative;
      padding: 0;
      height: 100%;
      // height: calc(100% - 40px);
    }
  }
  .pagingChild {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    .el-pagination__total {
      line-height: 28px;
    }
  }
}
</style>